<template>
  <div>
    <baidu-map class="map" :center="{ lng: 116.404, lat: 39.915 }" :zoom="11">
      <bm-driving
        :start="lushuPoint.start"
        :end="lushuPoint.end"
        :auto-viewport="true"
        :policy="policy"
        :panel="true"
        location="北京"
        :waypoints="['西二旗']"
        @searchcomplete="handleSearchComplete"
      >
      </bm-driving>
      <bml-lushu :path="path" :autoView="true" :content="content" :infoWindow="true" :speed="speed" :icon="icon" :play="play"> </bml-lushu>
    </baidu-map>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { BmlLushu } from 'vue-baidu-map-3x'

const policy = ref('')
const lushuPoint = ref({
  start: {
    lng: 116.301934,
    lat: 39.977552
  },
  end: {
    lng: 116.508328,
    lat: 39.919141
  }
})

const rotation = ref(true)
const play = ref(true)
const path = ref([])
const content = ref('开车去旅行')
const speed = ref(2000)
const icon = ref({
  url: '',
  size: {
    width: 52,
    height: 36
  },
  opts: {
    anchor: {
      width: 27,
      height: 13
    }
  }
})

const toggle = () => {
  play.value = !play.value
}

const handleSearchComplete = (res: any) => {
  path.value = res.getPlan(0).getRoute(0).getPath()
}
</script>
<style>
.map {
  height: 100vh;
  width: 100vw;
}
</style>
